<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>辉光管时钟</title>
</head>

<body>
    <div class="container">
        <div class="starter-template">
            <h1>选择你喜欢的配置......</h1>
        </div>
        <div class="starter-template">
            <h3>设置完了记得保存！！！</h3>
            <hr>
            <form name='input' action='/submit_conf' method='POST'>
                <p>
                <h3>氛围灯配置</h3>
                <b><input type="checkbox" name="led_enable" id="led_enable" onchange="colorChange()">氛围灯开关</b><br>
                <script type="text/javascript">
                    function colorChange() {
                        var value = document.getElementById('led_enable').checked;
                        var colorConfItems = document.getElementsByName('color_conf');
                        for (let index = 0; index < colorConfItems.length; index++)
                            colorConfItems[index].disabled = !value;
                        var colorValue = document.getElementById('led_color').disabled = !value;
                    }
                </script>
                <div id="form_color_conf">
                    <input type="radio" name="color_conf" value="default_color_conf_1" checked>土嗨跑马灯<br>
                    <input type="radio" name="color_conf" value="default_color_conf_2">土嗨跑马呼吸灯<br>
                    <input type="radio" name="color_conf" value="default_color_conf_3">固定颜色显示<br>
                    <input type="radio" name="color_conf" value="custom_color_conf">固定颜色呼吸灯<br>
                    颜色设置：<input type="color" name="led_color" id="led_color">
                </div>
                </p>
                <br>
                <p>
                <h3>时间配置</h3>
                时区设置：
                <select name="timezone_offset" id="timezone_offset">
                    <option value="-12">Eniwetok, Kwajalein</option>
                    <option value="-11">Midway Island, Samoa</option>
                    <option value="-10">Hawaii</option>
                    <option value="-9">Alaska</option>
                    <option value="-8">Pacific Time (US & Canada)</option>
                    <option value="-7">Mountain Time (US & Canada)</option>
                    <option value="-6">Central Time (US & Canada), Mexico City</option>
                    <option value="-5">Eastern Time (US & Canada), Bogota, Lima</option>
                    <option value="-4">Atlantic Time (Canada), Caracas, La Paz</option>
                    <option value="-3">Brazil, Buenos Aires, Georgetown</option>
                    <option value="-2">Mid-Atlantic</option>
                    <option value="-1">Azores, Cape Verde Islands</option>
                    <option value="0">Western Europe Time, London, Lisbon</option>
                    <option value="1">CET(Central Europe Time), Madrid, Paris, Rome</option>
                    <option value="2">EET(Eastern Europe Time), Kaliningrad, South Africa</option>
                    <option value="3">Baghdad, Kuwait, Moscow, Nairobi</option>
                    <option value="4">Abu Dhabi</option>
                    <option value="5">Islamabad, Karachi</option>
                    <option value="6">Almaty, Dhaka, Colombo</option>
                    <option value="7">Bangkok, Hanoi, Jakarta</option>
                    <option value="8" selected>Beijing, Perth, Singapore, Hong Kong, Taipei</option>
                    <option value="9">Tokyo</option>
                    <option value="10">EAST(East Australian Standard)</option>
                    <option value="11">New Caledonia</option>
                    <option value="12">Auckland</option>
                </select>
                <br>休眠时间设置：<input type="time" name="sleep_time_start" id="sleep_time_start"> ~ <input type="time" name="sleep_time_end" id="sleep_time_end">
                </p>
                <br>
                <p>
                <h3>辉光管配置</h3>
                <b><input type="checkbox" name="env_data_enable" id="env_data_enable">显示温湿度数据</b>
                </p>
                <br><input type='submit' value='保存'>
                <p>提交状态: <span id="result"></span></p>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        window.onload = function () {
            var confTest = "{\"ledState\":1,\"ledMode\":3,\"colorValue\":\"#ffcfc1\",\"timezoneOffset\":8,\"startSleepTime\":4294967295,\"endSleepTime\":4294967295,\"envDataEnable\":1}";
            var jsonConf = JSON.parse(confTest);
            document.getElementById("result").innerHTML = confTest;
            document.getElementById("led_enable").checked = jsonConf.ledState;
            colorChange();
            if (jsonConf.ledMode)
                document.getElementsByName("color_conf")[jsonConf.ledMode - 1].checked = true;
            if (jsonConf.colorValue)
                document.getElementById("led_color").value = jsonConf.colorValue;
            if (jsonConf.timezoneOffset)
                document.getElementById("timezone_offset").value = jsonConf.timezoneOffset;
            if (jsonConf.startSleepTime)
                document.getElementById("sleep_time_start").value = jsonConf.startSleepTime;
            if (jsonConf.endSleepTime)
                document.getElementById("sleep_time_end").value = jsonConf.endSleepTime;
            if (jsonConf.envDataEnable)
                document.getElementById("env_data_enable").checked = jsonConf.envDataEnable;
            console.log("init...");
            // var xmlhttp;
            // xmlhttp = new XMLHttpRequest();
            // xmlhttp.onreadystatechange = function () {
            //     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //         document.getElementById("result").innerHTML = xmlhttp.responseText;
            //         document.getElementById("led_enable").innerHTML = 1;
            //     }
            // }
            // var requestString = "/get_conf"
            // console.log("req:" + requestString);
            // xmlhttp.open("GET", requestString, true);
            // xmlhttp.send(null);
        }
    </script>
</body>

</html>